<template>
  <div class="login">
    <div class="content">
      <el-form
        ref="loginFormRef"
        :model="loginForm"
        :rules="rules"
        status-icon
        label-width="40px"
        class="demo-ruleForm"
        size="small"
      >
        <!-- 账号 -->
        <el-form-item label="账号" prop="loginId">
          <el-input
            v-model="loginForm.loginId"
            type="text"
            autocomplete="off"
          />
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="密码" prop="loginPwd">
          <el-input
            v-model="loginForm.loginPwd"
            type="password"
            autocomplete="off"
          />
        </el-form-item>
        <!-- 记住我 -->
        <el-form-item prop="ckMe">
          <el-checkbox v-model="loginForm.ckMe" label="记住我" />
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item>
          <el-button type="primary" @click="submitForm(loginFormRef)"
            >登录</el-button
          >
          <el-button @click="resetForm(loginFormRef)">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>


<script>
import { reactive, ref } from "vue";
import md5 from "js-md5";
import { $login } from "../api/admin";
import { useRouter } from "vue-router";
export default {
  name: "Login",
  setup() {
    // 绑定表单
    let $router = useRouter();
    const loginFormRef = ref(); // 绑定登录内容  账号 密码 记住我
    let loginForm = reactive({
      loginId: "",
      loginPwd: "",
      ckMe: false,
    }); // 验证账号 的规则

    const validateloginId = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入账号"));
      } else {
        // if (ruleForm.checkPass !== '') {
        //     if (!ruleFormRef.value) return
        //     ruleFormRef.value.validateField('checkPass', () => null)
        // }
        callback();
      }
    }; // 验证密码 的规则
    const validateloginPwd = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        // if (ruleForm.checkPass !== '') {
        //     if (!ruleFormRef.value) return
        //     ruleFormRef.value.validateField('checkPass', () => null)
        // }
        callback();
      }
    }; // 验证表单，将验证账号和密码的方法穿进去进行匹配
    const rules = reactive({
      loginId: [{ validator: validateloginId, trigger: "blur" }],
      loginPwd: [{ validator: validateloginPwd, trigger: "blur" }],
    }); // 提交按钮方法

    const submitForm = (formEl) => {
      if (!formEl) return; // 内置方法 添加
      formEl.validate((valid) => {
        if (valid) {
          $login({
            loginId: loginForm.loginId,
            loginPwd: loginForm.loginPwd,
          }).then((r) => {
            if (r) {
              //这里需要加判断
              if (loginForm.ckMe) {
                localStorage.setItem("loginId", loginForm.loginId);
                localStorage.setItem("loginPwd", loginForm.loginPwd);
              }
              $router.push("/layout");
            }
          });
        } else {
          console.log("error submit!");
          return false;
        }
      });
    }; // 重置按钮事件 清空表单
    const resetForm = (formEl) => {
      if (!formEl) return; // 清空表单 内置方法
      formEl.resetFields();
    };
    return {
      loginForm,
      submitForm,
      resetForm,
      loginFormRef,
      rules,
    };
  },
};
</script>

<style scoped lang='scss'>
.login {
  width: 100vw;
  height: 100vh;
  font-family: li;
  background: url("../../public/qinchen.jpeg") no-repeat 0 0 / 2000px;
  position: relative;
  .content {
    width: 400px;
    height: 200px;
    padding: 20px;
    border: 1px solid #fff;
    border-radius: 6px;
    background: url("../../public/qinchen.jpeg") no-repeat 0 0 /400px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    h2 {
      text-align: center;
      padding-bottom: 20px;
      color: #eee;
      font-weight: 500;
    }
    // 覆盖ele的样式用
    ::v-deep {
      label {
        font-size: 14px;
        color: rgb(31, 146, 31);
      }
    }
  }
}
</style>